body,
ul {
	margin: 0;
	padding: 0;
}

.box1 {
	background-color: #008000;
	width: 100px;
	height: 100px;
	border: 10px red solid;
	/* 内边距 会影响整体的宽度*/
	padding: 10px 10px 10px 10px;
	/* 外边距 看不见的，会影响占据的空间 */
	margin: 10px 10px 10px 10px;
	/* border-box 让内边距和边框 在宽度以内*/
	box-sizing: border-box;



}

.box2 {
	background-color: royalblue;
	width: 100px;
	height: 100px;
	/* 两个外边距在一起的时候，只算大的 */
	margin: 40px 10px 10px 10px;
}

.btn-login {
	background-color: #6ACAF9;
	border: 1px solid #eee;
	width: 200px;
	height: 44px;
	color: white;
	font-size: 18px;
}

.input-user {
	border: 1px solid #eee;
	margin-left: 10px;
	width: 200px;
	height: 22px;
	font-size: 18px;
	padding: 10px;
}

.list{
	/* margin-left: 25%; 邪门歪道定位方法~~不可取 */
	/* 相对定位 */
	position: relative;
	left: 200px;
}
.list2{
	/* 绝对定位 缺点会覆盖某些元素 */
	position: absolute;
	left: 0;
	bottom: 0;
}
.list li{
	display: inline-block; 
	border: 1px solid #6ACAF9;
	/* padding: 5px 10px 5px 10px; */
	padding: 5px 10px;
	
	
}
/* 分组样式  */
.list li:hover,.on{
	color: #ff0000;
	/* important 代表优先级高! */
	border-bottom: 2px solid #FF0000 !important;
}
.return-top{
	/* 固定位置，一定在那里不动，不管页面怎么滚动 */
	position: fixed;
	bottom: 0;
	right: 0;
	text-align: center;
	width: 70px;
	height: 70px;
	line-height: 70px;/* 行高 */
	border-radius: 50%;
	border:1px solid #6ACAF9;
	background-color: #fff;
	
}

.div{
	width: 600px;
	height: 100px;
	background-color: #666;
	/* 溢出 滚动 */
	overflow: scroll;
}
